<style lang="scss" scoped>
  .addContent>div{
    display: flex;
    margin-bottom: 10px;
    .label{
      width:200px;
      text-align: right;
      margin-right: 16px;
      
    }
  }
</style>
<template>
  <div>添加商品</div>
  {{ product }}
  <p>{{ fileList }}</p>
  <div class="addContent">
    <div>
      <span class="label">
        条形码:
      </span>
      <span clas="input">
        <el-radio-group v-model="hasCode" class="ml-4">
          <el-radio :label="1" size="large">有条形码</el-radio>
          <el-radio :label="2" size="large">没有条形码</el-radio>
        </el-radio-group>
        <el-input v-model="product.sku" v-if="hasCode==1"/>
      </span>
    </div>
    <div>
      <span class="label">商品分类:</span>
      <!-- el-cascader级联选选择器 
      ref dom引用通过它是由组件的方法 getCheckedNodes
      filterable 可以搜索
      options数据
      props 选择 expandTrigger 触发方式 label显示文本字段 value选中值字段
      @change 事件当发生变化
      -->
      <span class="input">
        <el-cascader
          ref="cas"
          v-if="cateList.length"         
          placeholder="选择商品分类"
          filterable
          :options="cateList"
          :props="{expandTrigger: 'hover',label:'catename',value:'id'}"
          @change="handleChange"
        />
      </span>
    </div>
    <div>
      <span class="label">
        商品名称:
      </span>
      <span clas="input">
        <el-input v-model="product.productName"/>
      </span>
    </div>
    <div>
      <span class="label">
        商品图片:
      </span>
      <span clas="input">
        <el-upload
      
          v-model:file-list="fileList"
          :limit="5"
          action="http://dida100.com:8888/api/file/upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
        <el-icon><Plus /></el-icon>
          <template #file="{ file }">
            <div>
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span
                  
                  @click="mainPic(file)"
                >
                主图
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <el-icon><Delete /></el-icon>
                </span>
              </span>
            </div>
          </template>
        </el-upload>
      </span>
    </div>
    <div>
      <span class="label">
        图文详情
      </span>
      <span clas="input" style="flex:1">
        <Editor
        v-model="rawStr"
        api-key="no-api-key"
        :init="{
        language:'zh_CN',
        plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount,'
          ],
          toolbar: 'undo redo | blocks | ' +
            'bold italic forecolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat |image| code help',
        height: 650, //编辑器高度
        min_height: 400,       
        images_upload_handler:upImg,//上传图片的处理器
        
      }"
      
    />
      </span>
    </div>

     
    <div>
      <span class="label">
        
      </span>
      <span clas="input">
        <el-button type="primary" @click="addProduct()">发布商品</el-button>
      </span>
    </div>

</div>
 
</template>

<script setup>
import axios from 'axios'
// 导入富文本编辑器
import Editor from '@tinymce/tinymce-vue'
// 导入icon
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
 import {ref}  from  'vue'
// 获取分类
 import {GetCate,AddProduct} from '@/api/product.js'
//  是否显示sku
 const hasCode = ref(1);
//  被添加的产品
 const product = ref({
  sku:''
 })
// 分类信息
const cateList = ref([])
// 默认获取一次分类信息
GetCate()
.then(res=>{
  cateList.value = res.data.list;
})
// 当级联选择发送变化
const handleChange = (value) => {
  console.log(value)
  // 获取选择的节点列表
  var nodes = cas.value.getCheckedNodes()
  // 更新要添加的商品分类id与名称
  product.value.categoryId = nodes[0].value;
  product.value.cateName = nodes[0].label;
}
//  cas级联选择dom引用
const cas = ref();

// 处理图片上传
const fileList = ref([
  
  
])

// 删除删除
const handleRemove = (file) => {
 
  // console.log(fileList.value[0].response.file.path)
  // 找到文件对应的下标
  var ind =  fileList.value.findIndex(item=>item.response.file.path===file.response.file.path);
  // console.log(ind,"ind");
  // 实现删除操作
  fileList.value.splice(ind, 1)

}

const mainPic = (file) => {
  // 找到主图对应的下标
  // responose是后端返回内容
  var ind =  fileList.value.findIndex(item=>item.response.file.path===file.response.file.path);
  // 删除返回的是一个数组
  var item = fileList.value.splice(ind, 1);
  // console.log({...item});
  // 把第0个添加到最前面
  fileList.value.unshift(item[0]);
}
 
// 添加商品
function addProduct(){
 
  // 把fileList转换为图片
  var list = fileList.value.map(item=>'http://dida100.com:8888'+item.response.file.path)
  // 数组转换为字符串用 | 分割
  product.value.gallery = list.join("|");
  // 把富文本内容赋值给product产品
  product.value.body= rawStr.value;
  // 执行添加api
  AddProduct(product.value)
  .then(res=>{
    if(res.data.code==0){
      alert("发布成功");
      fileList.value = [];
      rawStr.value='';
      // 清空产品
      product.value={}

    }
  })
}
// 处理图片上传
function upImg(blobInfo, progress){
  // 返回一个promise承诺 bolbInfo 文件信息 progress进度
  return new Promise((resolve,reject)=>{
    // 表单对象（上传文件都要用这个）
    const formData = new FormData();
    formData.append('file', blobInfo.blob(), blobInfo.filename());
    // 发送请求
    axios.post("http://dida100.com:8888/api/file/upload",formData)
    .then(res=>{
        // 返回一个图片地址
        resolve('http://dida100.com:8888'+res.data.file.path)
    })
    .catch(err=>reject(err))
  })
}
 
// 定义 富文本数据
const rawStr = ref('一款颜值很高的富文本编辑器')

 
</script>

